<template>
  <div>
    <table-form :disabled="disabled" @next="sales3Ctrl" @jump="jump">
      <template slot="title">
        <h2 class="fromDivTit">
          <div>填写预约拍照日期和信息</div>
          <i
            v-if="isEdit && detailRes.step <= 9"
            class="edit-icon"
            @click="isEnabled = true"
          />
        </h2>
      </template>
      <div class="form-body">
        <el-form
          ref="sales3Form"
          :model="sales3Form"
          :rules="rules"
          label-width="95px"
          class="formDiv"
        >
          <el-form-item
            label="拍照日期:"
            class="itxt itxtactive"
            prop="photoDate"
          >
            <el-date-picker
              v-model="sales3Form.photoDate"
              :disabled="isEdit && !isEnabled"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width: 493px"
            />
            <!-- clear-icon= -->
          </el-form-item>
          <el-form-item label="备注:">
            <el-input
              v-model="sales3Form.remarkStep3"
              :disabled="isEdit && !isEnabled"
              :rows="5"
              placeholder="请输入"
              style="width: 493px"
              type="textarea"
            />
          </el-form-item>
        </el-form>
        <div v-if="jumpReason" class="jump-box">
          <div class="jump-reson">跳过原因:</div>
          <span>{{ jumpReason }}</span>
        </div>
      </div>
      <template v-if="isEdit" slot="footer">
        <div class="dialog-footer">
          <el-button
            v-if="isEnabled"
            :disabled="disabled"
            type="primary"
            @click="saveEdit"
            >保存</el-button
          >
        </div>
      </template>
    </table-form>
  </div>
</template>
<script>
import TableForm from "../../../lease/components/tableForm";
import { saleStep3, edit } from "@/api/sale";
export default {
  components: {
    TableForm,
  },
  props: {
    id: {
      type: String,
      default: "",
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      rules: {
        photoDate: [
          {
            required: true,
            message: "请选择日期",
          },
        ],
      },
      sales3Form: {
        photoDate: null,
        remarkStep3: "",
        id: "",
      },
      disabled: true,
      isEnabled: false,
      detailRes: {
        jumpList: [],
      },
    };
  },
  computed: {
    jumpReason() {
      if (!this.detailRes.jumpList) return "";
      const hasReason = this.detailRes.jumpList.find((item) => {
        return item.jumpStep === 3;
      });
      return hasReason ? hasReason.jumpNote : "";
    },
  },
  watch: {
    sales3Form: {
      handler(newVal, oldVal) {
        if (newVal.photoDate) {
          this.disabled = false;
        } else {
          this.disabled = true;
        }
      },
      deep: true,
    },
  },
  async mounted() {
    if (!this.isEdit) {
      this.sales3Form = {
        photoDate: null,
        remarkStep3: "",
        id: this.id,
        stepName: "待预约拍照",
      };
    } else {
      await this.$store.dispatch("detail/getSaleDatail", this.id);
      var detail = this.$store.state.detail.saleDetail;
      this.detailRes = detail;
      this.sales3Form = Object.assign(
        {},
        {
          photoDate: detail.photoDate ? new Date(detail.photoDate) : null,
          remarkStep3: detail.remarkStep3,
          id: this.id,
          stepName: "待预约拍照",
        }
      );
    }
  },
  methods: {
    async saveEdit() {
      var res = await edit(this.sales3Form);
      if (res.code === 200) {
        this.$message({ message: "操作成功", type: "success" });
        this.isEnabled = true;
      }
    },
    async sales3Ctrl() {
      this.sales3Form.id = this.id;
      var sale3Res = await saleStep3(this.sales3Form);
      if (sale3Res.code === 200) {
        this.$emit("next");
      }
    },
    jump() {
      this.$emit("jump", this.sales3Form);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-textarea__inner {
  height: 113px !important;
}
.form-body {
  display: flex;
  .jump-box {
    margin-left: 50px;
    word-break: break-all;
    .jump-reson {
      color: #5ac6b7;
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
}
</style>
